<template>

  <!-- 注意，该部分是由startLearning页面粘贴复制修改的，建议先完成startLearning页面再完成该页面 -->
  <view class="Border">
    <!-- 单词渲染部分 -->
    <view class="word ">
      <view class="wordLeft" @click="audio">

        <text>{{currentWord.word}} </text>
        <!-- 喇叭UI部分能找到免费音标接口再优化 -->
        <span class="iconfont horn" style="font-size:50rpx; ">&#xe6fd;</span>
        <text>{{currentWord.translation}}</text>
      </view>
      <view @click="collectionStatus">
        <!-- 未收藏 -->
        <span v-if="!currentWord.collection" class="iconfont star" style="font-size: 100rpx; ">&#xe661;</span>
        <!-- 已收藏 -->
        <span v-else class="iconfont star" style="font-size: 100rpx; ">&#xe662;</span>
      </view>
    </view>
    <!-- 下滑线 -->
    <view class="divider" />

    <!-- 释义部分 -->
    <view class=" interpretation">
      <p>
        <span>【详细释义】</span>
        <span @click="hide">{{none?'一直隐藏释义':'一直显示释义'}}</span>
      </p>
      <textarea maxlength="-1" @longpress="longpress" v-if="none" v-model="currentWord.paraphrase" disabled="true">

      </textarea>
    </view>

    <!-- 插入视频功能暂时搁浅   （这个功能居然做不出来，微信小程序真他妈垃圾）-->
    <!--   <view class="bk" >
      <iframe src="//player.bilibili.com/player.html?aid=403789047&bvid=BV1gV411L7Cs&cid=1209409118&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> 

    </view>
 -->

    <!-- 选择按钮事件 -->
    <view class="choose ">
      <view class="chooseflex">
        <u-button type="primary" shape="circle" @click="last" size="small" text="上一个"></u-button>
        <!-- 已掌握功能暂时弃用 -->
        <!-- <u-button type="warning" shape="circle" size="small" text="已掌握"></u-button> -->
        <u-button type="success" shape="circle" @click="next" size="small" text="下一个"></u-button>
      </view>
      <!-- 单词的滑动选择器 -->
      <van-slider bar-height="8rpx" min="1" :max="words.length" v-model="slider" @change="change" use-button-slot>
        <view class="custom-button" slot="button">{{slider+'/'+words.length}}</view>
      </van-slider>


    </view>

    <!-- 编辑单词弹窗层 -->
    <view>
      <van-dialog use-slot title="编辑单词" :show="show" show-cancel-button :before-close="onBeforeClose" zIndex="109"
        @close="close">

        <van-field :value="Modifyword.translation" @change="formTranslation" :border="false" label="单词释义"
          placeholder="请输入单词释义" />

        <van-field type="textarea" custom-style="margin-top:10rpx;padding-right:30rpx;height:600rpx"
          :autosize="{ 'minHeight': 400}" :value="Modifyword.paraphrase" @change="textarea" maxlength="-1"
          placeholder="请输入单词详细释义" />
      </van-dialog>

    </view>

    <van-notify id="van-notify" style="z-index: 2001 !important;" />
  </view>

</template>

<script>
  import {
    deepClone
  } from '@/util/tool.js'
  import Notify from '@/wxcomponents/vant/notify/notify';
  export default {


    data() {
      return {
        id: null, //当前单词本id
        wordId: null, //当前单词id
        words: [], //单词本所有数据
        currentWord: [], //当前单词数据
        aa: '213           213',
        slider: null, //单词滑动选择器
        none: true, //隐藏释义
        iframe: '<iframe src="https://player.bilibili.com/player.html?aid=403789047&bvid=BV1gV411L7Cs&cid=1209409118&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>',
        videoUrl: 'https://player.bilibili.com/player.html?aid=403789047&bvid=BV1gV411L7Cs&cid=1209409118&page=1',
        show: false, //编辑单词弹出窗
        // 已经修改的单词释义
        Modifyword: {
          id: null, //id在slider侦听器里也顺便自动侦听
          translation: null,
          paraphrase: null
        }
      };
    },

    watch: {
      // 侦听单词滑动选择器,来更新当前单词数据
      slider: function(val) {
        this.currentWord = this.words[this.slider - 1]
        // 需要深拷贝，用递归开辟新的存储空间,不能单纯的浅拷贝
        this.Modifyword = deepClone(this.words[this.slider - 1])
      },

    },
    methods: {


      // 获取单词数据
      async getBooks() {
        let id = {
          id: this.id
        }
        const res = await uni.$myRequest('/home/word/getWord', 'GET', id)
        this.words = res.data.data
        this.currentWord = this.words[this.slider - 1]
      },
      // 单词翻译音标 (暂时弃用)
      // async phoneticSymbol() {
      // }
      // 单词发音事件
      audio(word) {
        // main.js文件中把音频实例保存为全局变量
        this.$audio.src = 'http://dict.youdao.com/dictvoice?audio=' + this.currentWord.word
        this.$audio.play()
      },
      // 收藏状态事件
      async collectionStatus() {
        this.currentWord.collection = this.currentWord.collection ? 0 : 1
        let id = {
          id: this.currentWord.id
        }
        const res = await uni.$myRequest('/home/word/markWords', 'POST', id)
        this.getBooks()
      },
      // 隐藏释义事件
      hide() {
        this.none = !this.none
      },
      // 滑块值改变事件
      change(event) {
        this.slider = event.detail
      },
      // 上一个
      last(event) {
        if (this.slider !== 1) {
          this.slider = this.slider - 1
          // 阻止当前的发音
          this.$audio.stop()
        } else {
          uni.showToast({
            title: '这是第一个',
            icon: "error",
            duration: 1000
          })
        }
      },
      // 下一个
      next() {
        if (this.slider !== this.words.length) {
          this.slider = this.slider + 1
          // 阻止当前的发音
          this.$audio.stop()
        } else {
          uni.showToast({
            title: '这是最后一个',
            icon: "error",
            duration: 1000
          })
        }

      },
      // 长按编辑事件
      longpress() {
        this.show = true
      },
      // 修改单词
      async bookConfirm() {

        console.log(this.Modifyword, 'Modifyword修改')
        const res = await uni.$myRequest('/home/word/modifyWord', 'POST', this.Modifyword)
        this.getBooks()
      },
      // 添加单词弹窗的点击取消和确认的事件(vant真他妈难用)
      onBeforeClose(action) {
        //因为onBeforeClose无法获取this,所以使用getCurrentPages（获取当前页面栈）来获取data
        const pages = getCurrentPages()
        // page就是当前页面
        let page = pages[pages.length - 1]
        return new Promise((resolve) => {
          if (action === 'confirm') {
            if (!page.data.currentWord.translation) {
              Notify({
                type: 'danger',
                message: '请输入单词释义',
                duration: 1500,
              });
              return resolve(false);
            } else if (!page.data.currentWord.paraphrase) {
              console.log(page.data.currentWord.paraphrase, 'page.data.currentWord.paraphrase')
              Notify({
                type: 'danger',
                message: '请输入单词详细释义',
                duration: 1500,
              });
              return resolve(false);
            }
            // 新增单词
            page.$vm.bookConfirm()
          }
          resolve(true);
        })

      },
      // 新增单词弹框的关闭事件
      close() {
        this.show = false
      },

      formTranslation(event) {
        // 因为currentWord是双向绑定,为了用户体验不能直接赋值
        this.Modifyword.translation = event.detail
      },
      textarea(event) {
        // 因为currentWord是双向绑定,为了用户体验不能直接赋值
        this.Modifyword.paraphrase = event.detail
      },
    },
    mounted() {

      // this.currentWord = this.words[0]
      // 根据当前单词id的索引值，进行动态slider赋值,然后侦听器自动侦听
      this.slider = this.words.findIndex(item => item.id == this.wordId) + 1 - 0

    },
    onLoad(options) {
      // 单词本id赋值
      console.log(options, 'options')
      this.id = options.dept_id
      this.wordId = options.id
      this.getBooks()

    }
  }
</script>

<style lang="scss">
  .Border {
    height: 100vh;
    margin: 0 20rpx;
    padding: 20rpx 20rpx 0rpx;
    border: 1rpx solid #d5d5d5;
    border-radius: 8px;
  }



  .divider {
    background: #E0E3DA;
    width: 100%;
    height: 1rpx;
  }

  .word {
    height: 250rpx;
    display: flex;
    justify-content: space-between;

    .wordLeft {

      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: flex-start;

      text:nth-child(1) {
        font-weight: 700;
        font-size: 50rpx;
      }
    }

    .star {
      line-height: 250rpx;
      font-size: 100rpx
    }
  }

  .interpretation {
    margin-top: 20rpx;

    p {
      width: 100%;
      display: flex;
      justify-content: space-between;

      span:nth-child(1) {
        font-weight: 700;
      }

      span:nth-child(2) {
        font-weight: 700;
        color: #39a9ed;
        font-size: 26rpx;
        padding: 6rpx;
        line-height: 100%;
        border: 1.5px solid #39a9ed;
        border-radius: 25px;
      }
    }

    textarea {
      width: 100%;
      height: 500rpx;
      padding: 5rpx;
      margin-top: 10rpx;
      border: 1px solid #d5d5d5;
      ;
      border-left: none;
      border-right: none;
    }
  }

  .choose {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50rpx;
    width: calc(90% - 40rpx);

    .chooseflex {
      display: flex;
      width: calc(100% - 40rpx); //加减符号两边要加空格，否则会无效
      margin-bottom: 20rpx;

      /deep/ .u-button--small {
        width: 180rpx;
      }
    }
  }

  .slider {
    width: calc(100% - 80rpx);
  }



  .custom-button {
    padding: 0 8rpx;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #f9ae3d;
    border-radius: 100px;

  }

  van-field {
    /deep/ .van-cell {
      padding: 7rpx 0 7rpx 32rpx;
    }

  }
</style>
